<template>
  <header class="navbar navbar-expand-md d-print-none">
    <div class="container-xl">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu"
        aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
        <a :href="baseUrl + '/resident-machine'">桌面驻留程序管理</a>
      </div>
      <div class="navbar-nav flex-row order-md-last">
        <div class="d-none d-md-flex"></div>
      </div>
    </div>
  </header>

  <header class="navbar-expand-md">
    <div class="collapse navbar-collapse" id="navbar-menu">
      <div class="navbar">
        <div class="container-xl">
          <div class="row flex-fill align-items-center">
            <div class="col">
              <ul class="navbar-nav">
                <li class="nav-item" :class="{'active': machineActive}">
                  <router-link :to="baseUrl + '/resident-machine'" class="nav-link">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path>
                        <path d="M12 12l8 -4.5"></path>
                        <path d="M12 12l0 9"></path>
                        <path d="M12 12l-8 -4.5"></path>
                        <path d="M16 5.25l-8 4.5"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">机器列表</span>
                  </router-link>
                </li>

                <li class="nav-item" :class="{'active': pluginActive}">
                  <router-link :to="baseUrl + '/resident-plugin'" class="nav-link">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"></path>
                        <path d="M12 12l8 -4.5"></path>
                        <path d="M12 12l0 9"></path>
                        <path d="M12 12l-8 -4.5"></path>
                        <path d="M16 5.25l-8 4.5"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">插件列表</span>
                  </router-link>
                </li>

                <!-- <li class="nav-item">
                  <a class="nav-link" :href="baseUrl + '/demo'">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
                        <path d="M12 8l0 8"></path>
                        <path d="M8 12l8 0"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">
                      Demo页面
                    </span>
                  </a>
                </li> -->

                <li class="nav-item dropdown" :class="{'active': configActive}">
                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" @click="toggleConfigMenu">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                        <path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                        <path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                        <path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">配置</span>
                  </a>
                  <div class="dropdown-menu config-dropdown" :class="{'show': isConfigMenuOpen}" data-bs-popper="static">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <router-link :to="baseUrl + '/plugins-setting'" class="dropdown-item" @click="closeConfigMenu">插件标签</router-link>
                        <router-link :to="baseUrl + '/operate-log'" class="dropdown-item" @click="closeConfigMenu">操作日志</router-link>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue';
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
const baseUrl = ref(import.meta.env.BASE_URL);
const machineActive = ref(false);
const pluginActive = ref(false);
const configActive = ref(false);
const isConfigMenuOpen = ref(false);

const toggleConfigMenu = () => {
  isConfigMenuOpen.value = !isConfigMenuOpen.value;
};

const closeConfigMenu = () => {
  isConfigMenuOpen.value = false;
};

watch(() => route.path, (newPath) => {
  machineActive.value = newPath == baseUrl.value || newPath == (baseUrl.value + '/') || newPath == (baseUrl.value + '/resident-machine');
  pluginActive.value = newPath === baseUrl.value + '/resident-plugin';
  configActive.value = newPath === baseUrl.value + '/plugins-setting' || newPath === baseUrl.value + '/operate-log';
});
</script>

<style scoped>
.config-dropdown {
  margin-top: 0.5rem !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000 !important;
}
</style>